/**
 * 列表请求
 *      ！！！后面要用公司框架的列表了，该文件应该用不上了！！！
 * 
 * 
 *      在引入页面data中申明listApi: api的实体
 * 
 *      有搜索的话可写成
 *          <el-form ref="form"
                     :model="mxListParams.search"
                     label-width="120px"
                     size="small">
            搜索btn调用mxFnSearch()
            重置btn调用mxFnReset()
 *  
 *      el-table可写成
 *          <el-table :data="mxListData"
                      v-loading="mxListLoading"
                      class="table">
 * 
 *      分页的可写成
 *          <el-pagination background
                           :current-page.sync="mxListParams.current"
                           :page-sizes="mxPageSizes"
                           :page-size.sync="mxListParams.size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="mxListTotal"
                           @current-change="mxFnCurrentChange"
                           @size-change="mxFnSizeChange">
 */

export default {
    data () {
        return {
            // 是否正在加载listApi
            mxListLoading: false,
            // 列表数据
            mxListData: [],
            // 列表请求参数
            mxListParams: {
                current: 1,
                size: 10,
                search: {}
            },
            // 列表总数
            mxListTotal: 0,
            // 搜索条件有时间范围的话，可用
            mxDaterange: [],
            // 配置后端接收的开始时间和结束时间的字段
            mxDaterangeParams: ['startDate', 'endDate']
        }
    },
    created () {
        if (this.listApi) {
            // 初始化请求参数
            this.fnInitSearchParams && this.fnInitSearchParams()

            this.mxFnGetApi()
        } else {
            console.warn("没有配置listApi")
        }
    },
    computed: {
        // 返回el-pagination的page-sizes属性
        mxPageSizes: function () {
            let
                set = new Set([10, 20, 30, 40, 50, this.mxListParams.size]),
                arr = [...set]

            arr.sort((a, b) => {
                return a - b
            })

            return arr
        }
    },
    methods: {
        // 请求listApi
        mxFnGetApi () {
            if (!this.listApi) return

            // 请求之前的钩子
            this.fnBeforeListApi && this.fnBeforeListApi()

            this.mxListLoading = true

            return this.listApi(this.mxListParams).then(res => {
                this.mxListData = res.records
                this.mxListTotal = res.total

                // 请求成功之后的钩子
                this.fnAfterListApi && this.fnAfterListApi(res)
            }).finally(() => {
                this.mxListLoading = false
            })
        },
        // 查找方法
        mxFnSearch () {
            this.mxListParams.current = 1
            this.$nextTick(() => {
                this.mxFnGetApi()
            })
        },
        // 搜索的重置方法
        mxFnReset (refName = 'form') {
            this.$refs[refName].resetFields()
            this.mxDaterange = []

            Object.assign(this.mxListParams, this.$options.data().mxListParams)

            this.fnInitSearchParams && this.fnInitSearchParams()

            this.$nextTick(() => {
                this.mxFnGetApi()
            })
        },
        // 当前页变化后调用
        mxFnCurrentChange (current) {
            this.mxListParams.current = current
            this.mxFnGetApi()
        },
        // 当前大小变化后调用
        mxFnSizeChange (size) {
            this.mxListParams.current = 1
            this.mxListParams.size = size
            this.mxFnGetApi()
        }
    },
    watch: {
        // 将时间范围ui组件返回的数据转成api需要的搜索参数
        mxDaterange: function (val) {
            let
                startDate = this.mxDaterangeParams[0],
                endDate = this.mxDaterangeParams[1]

            if (val && val.length > 0) {
                this.mxListParams.search[startDate] = val[0]
                this.mxListParams.search[endDate] = val[1]
            } else {
                this.mxListParams.search[startDate] = ''
                this.mxListParams.search[endDate] = ''
            }
        }
    }
}
